import React from 'react';
import { renderRoutes } from 'react-router-config';
import { Top, Tab, TabItem, ContentBox } from './style';
import { NavLink } from 'react-router-dom';
import Player from "../Player";


function Home(props) {

    const { route } = props;

    const tabArr = [
        {
            path: '/recommend',
            name: '推荐',
        },
        {
            path: '/singers',
            name: '歌手',
        },
        {
            path: '/rank',
            name: '排行',
        },
    ];

    return (
        <div>
            <Top>
                <span className='iconfont menu'>&#xe65c;</span>
                <span>Pro</span>
                <span className='iconfont search'>&#xe62b;</span>
            </Top>
            <Tab>
                {
                    tabArr.map((item, index) => {
                        return(
                            // NavLink 有activeClassName
                            <NavLink to={item.path} key={index} activeClassName="selected"><TabItem><span > {item.name} </span></TabItem></NavLink>
                        )
                    })
                }

            </Tab>
            <ContentBox>
                { renderRoutes(route.routes)}
            </ContentBox>
            <Player />
        </div>
    )
}
export default React.memo(Home);
